<template>
  <div class="register-container">
    <div class="register-wrapper">
      <P class="title">用户注册</P>
          <el-form :model="registerModel" status-icon :rules="rules" ref="registerForm">
            <el-row>
              <el-col :span="22">
                <el-form-item label="" style="margin-left:35px;" prop="email">
                  <div class="icon_user"></div>
                  <el-input class='login_input' placeholder="邮箱" v-model="registerModel.email" clearable >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="" style="margin-left:35px;" prop="password">
                  <div class="icon_password"></div>
                  <el-input class='login_input' placeholder="密码" v-model="registerModel.password" clearable type="password" >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="" style="margin-left:35px;" prop="verify_password">
                  <div class="icon_password"></div>
                  <el-input class='login_input' placeholder="确认密码" v-model="registerModel.verify_password" clearable type="password" >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="" style="margin-left:35px;" >
                  <span>123</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="" style="margin-left:35px;" prop="verify_code">
                  <div class="icon_password"></div>
                  <el-input class='login_input' placeholder="验证码" v-model="registerModel.verify_code" clearable @keyup.enter.native="register('registerForm')">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="" style="margin-left:35px;">
                  <el-button type="primary" style="width:100%;" @click="register('registerForm')">注册</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
    </div>
  </div>
</template>
<script>
export default{
  name: 'Register',
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'))
      } else if (value !== this.registerModel.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerModel: {
        email: null,
        password: null,
        verify_password: null,
        verify_code: null
      },
      rules: {
        email: [
          { required: true, message: '请输入Email', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 255, message: '密码至少个字符', trigger: 'blur' }
        ],
        verify_password: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        verify_code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    register: function (formName) {
      this.$refs[formName].disabled = true
      let self = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/Account/Register', this.registerModel, {msg: '注册成功'}).then(function (data) {
            if (data.length !== 0) {
              self.$router.push({
                path: '/login'
              })
              self.$refs[formName].disabled = false
            }
          })
        } else {
          self.$refs[formName].disabled = false
          return false
        }
      })
    }
  }
}
</script>
